﻿ <!DOCTYPE html>
<html>
<link rel="shortcut icon" href="../images/desktopCapture128.png">
<head>
<style>
* {
  -webkit-user-select: none;
  -user-select: none;
  -webkit-user-drag: none;
  -user-drag: none;
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 400px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1em;
  overflow: hidden;
}

hr {
  border: 0;
  border-top: solid lightgray 1px;
}

div {
  padding: 4px 8px;
}

div.btn {
  text-decoration: none;
  outline: none;
  border: 0;
  font-size: inherit;
  cursor: pointer;
}

div.btn:hover {
  background: rgba(234,234,234,1);
  text-decoration: none;
}

a {
  outline: none;
  text-decoration: none;
  color: #0C97BB;
}

div.btn img {
  height: 22px;
  vertical-align: middle;
}

section {
  margin-right: 5px;
  text-align: right;
  width: 24px;
  display: inline-block;
  vertical-align: baseline;
}

#stop-sharing {
  color: #e20a0a;
  font-weight: bold;
}

#default-section, #stop-section {
  display: none;
}
</style>
</head>
<body>
    <article id="default-section">
      <div class="btn" id="full-screen">
          <section><img src="../images/desktopCapture22.png"></section>
          Screen Without Audio
      </div>
      <hr>
      <div class="btn" id="microphone-screen">
          <section><img src="../images/desktopCapture22.png"></section>
          Screen + Microphone
      </div>
      <hr>
      <div class="btn" id="full-screen-audio">
          <section><img src="../images/desktopCapture22.png"></section>
          Screen + Speakers
      </div>
      <hr>
      <div class="btn" id="full-screen-audio-microphone">
          <section><img src="../images/desktopCapture22.png"></section>
          Screen + Microphone + Speakers
      </div>
      <hr>
      <div class="btn" id="full-screen-audio-microphone-camera">
          <section><img src="../images/desktopCapture22.png"></section>
          Screen + Microphone + Speakers + Camera
      </div>
      <hr>
      <div class="btn" id="selected-tab">
          <section><img src="../images/desktopCapture22.png"></section>
          Chrome Tab + Speakers
      </div>
      <hr>
      <div class="btn" id="microphone-screen-camera">
          <section><img src="../images/desktopCapture22.png"></section>
          Screen + Camera
      </div>
      <hr>
      <div class="btn" id="microphone-webcam">
          <section><img src="../images/desktopCapture22.png"></section>
           Camera Only
      </div>
      <hr>
      <div style="text-align: right;">
        <a id="btn-options" href="options.html" target="_blank">Options</a>
      </div>
    </article>

    <article id="stop-section">
      <div class="btn" id="enable-chat">
          <section><img src="../images/chat.png"></section>
          Open Chat Box
      </div>
      <hr>
      <div class="btn" id="stop-sharing">
          <section><img src="../images/stop.png"></section>
          Stop Sharing
      </div>
    </article>

    <script src="dropdown.js"></script>
</body>
</html>
